<template>
<div class="zoom">
    <if-header></if-header>
    <van-search
            v-model="value"
            shape="round"
            background="#fff"
            placeholder="输入关键字，查能不能做"
            />
    <van-tabs swipeable color="rgb(136,223,171)" line-width=".15rem" line-height=".06rem" title-active-color="#000" @click="clickHander">
        <van-tab v-for="(item, index) in period" :title="item.title" :key="index" :to="'/ageSearch/'+item.pid" @click="itemclick(item.pid)">
            <van-tabs type="line" line-width="0rem" line-height="0rem" title-active-color="rgb(136,223,171)">
                <van-tab title="全部"></van-tab>
                <van-tab title="能做"></van-tab>
                <van-tab title="不能做"></van-tab>
                <van-tab title="慎做"></van-tab>
            </van-tabs>
            <div v-for="(value, index) in list" :key="index" class="outbox" :to="'/ageSearch/'+value.conclusion">
                <img :src="value.image_url" alt="" class="left">
                <div class="rightitem">
                    <span class="title">{{value.title}}</span>
                    <img src="http://static.epetbar.com/epet_wap_img/opgc/o_false.png" alt="" v-if="value.conclusion==2">
                    <img src="http://static.epetbar.com/epet_wap_img/opgc/o_right.png" alt="" v-if="value.conclusion==1">
                    <img src="http://static.epetbar.com/epet_wap_img/opgc/o_watch.png" alt="" v-if="value.conclusion==3">
                    <span class="lititle">{{item.title}}</span>
                    <p class="txt">{{value.descri}}</p>
                </div>
            </div>
        </van-tab>
    </van-tabs>
</div>
</template>

<script>
import Vue from 'vue';
import ifHeader from '../header'
import { Search, Tab, Tabs } from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
export default {
    data() {
        return {
            value : '',
            list:[],
            conclusion:[],
            period:[]
        }
    },
    components: {
        'if-header' : ifHeader,
    },
    async mounted() {
        let result = await this.$http.get({
            url:'content/Tools/Do.html',
            params:{
                do: 'list',
                pid: 1,
                word: '',
                page: 1,
                pettype: 'dog',
                conclusion: 0,
                system: 'wap',
                isWeb: 1,
                version: 517,
                distinct_id: '1768548a12f68-06d1a541b973ac-c791039-1327104-1768548a1313ca'
            }
        })
        this.list = result.data.list
        this.conclusion = result.data.conclusion
        this.period = result.data.period
        // console.log(this.period);
        console.log(this.list);
    },
    methods:{
        clickHander(name,title){
            console.log(name,title);
            console.log(this.$router.history.current.params.pid);
            console.log(this.$router);
            this.$http.get({
                url:'content/Tools/Do.html',
                params:{
                    do: 'list',
                    pid: name+1,
                    word: '',
                    page: 1,
                    pettype: 'dog',
                    conclusion: 0,
                    system: 'wap',
                    isWeb: 1,
                    version: 517,
                    distinct_id: '1768548a12f68-06d1a541b973ac-c791039-1327104-1768548a1313ca'
                }
            }).then(res=>{
                this.list = res.data.list
                this.conclusion = res.data.conclusion
                this.period = res.data.period
            })
        },
        itemclick(pid) {
            console.log(pid);
        }
    }
}
</script>

<style lang="stylus" scoped>
/deep/.van-tabs
    border none
/deep/.van-tab
    margin-left .1rem
    border none
.zoom
    width 100%
    height 6.6rem
    overflow-y scroll
.outbox
    padding .1rem
    display flex
    .left
        width .9rem
        height .9rem
        border-radius .1rem
    .rightitem
        flex 1
        margin-left .1rem
        border-bottom 1px solid #eee
        overflow hidden
        text-overflow ellipsis
        display -webkit-box
        -webkit-line-clamp 4
        -webkit-box-orient vertical
        .title
            font-size .15rem
            margin-right .05rem
            font-weight 700
        img 
            width .14rem
            height .14rem
        .lititle
            vertical-align -.02rem
            color #666
            font-size .12rem
        p
            font-size .12rem
            line-height .2rem
            height .4rem
            color #666
            margin-top .05rem
</style>